<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 100px;height: 100px;background: red;}
    </style>
</head>
<body>
    <div class="box">
        <span>文字1</span>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <span>文字2</span>
        <p>段落4</p>
        <span>文字3</span>
        <p>段落5</p>
        <p>段落6</p>
        <span>文字4</span>
    </div>
</body>
<script src="./jquery.js"></script>
<script>

    // 1. 常规绑定，只能绑定，不能删除
    $(".box").click(function(){
        console.log(1)
    })
    // $(".box").click(function(){
    //     console.log(2)
    // })

    // 2. bind绑定，unbind删除
    // $(".box").bind("click.a",function(){
    //     console.log(1)
    // })
    // $(".box").bind("click.b",function(){
    //     console.log(2)
    // })
    // $(".box").unbind("click.a");

    // 3. on绑定，off删除
    // $(".box").on("click.a",function(){
    //     console.log(1)
    // })
    // $(".box").on("click.b",function(){
    //     console.log(2)
    // })
    // $(".box").off("click.a")

    // on绑定可以直接实现事件委托
    // $(".box").on("click", "p", function(){
    //     console.log(this);
    // })
    
    // 4. one绑定一次性事件（只能触发一次的事件）
    // $(".box").one("click",function(){
    //     console.log(1);
    // })

    // 5. hover绑定：进入和离开
    // $(".box").hover(function(){
    //     console.log("进入")
    // },function(){
    //     console.log("离开")
    // })

    // 6. 模拟事件执行
    // setInterval(() => {
    //     $(".box").trigger("click");
    // }, 1000);




</script>
</html>